<template>
    <div class="content">
        <a-card class="card">
            <div class="button">
                <a-space>
                    <a-button type="primary" @click="showAddModal">新增</a-button>
                    <a-popconfirm title="确定要删除菜单吗?"
                                  ok-text="Yes"
                                  cancel-text="No"
                                  @confirm="confirm"
                                  @cancel="cancel">
                        <a-button type="primary" danger>删除</a-button>
                    </a-popconfirm>

                    <!--                    <a-button type="dashed">删除</a-button>-->
                </a-space>
            </div>
            <div class="tableBox">
                <a-table :loading="loading"
                         childrenColumnName="childrenMenus"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :columns="columns">
                    <template #button="{ text}">
                        <span style="color: #4EB1F7" v-if="text=='1'">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #show="{ text}">
                        <span style="color: #4EB1F7" v-if="text=='1'">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #action="{record}">
                        <a-button type="link" @click="editHandle(record)">编辑</a-button>

                    </template>
                </a-table>
            </div>
        </a-card>
        <!--  新增弹框      -->
        <common-modal :data="modalData.formState" :visible="modalData.showAdd" :title="modalData.title" :typeName="modalData.typeName" @close="handleClose"></common-modal>
    </div>
</template>

<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import {
    apiGetGoodsInfo,
    apiGetShopInfo,
    apiAddGoods,
    apiUpdateGoods,
    apiDeleteGoods,
    apiGetShopGoodsInfo
} from "../../../api";
import {message} from "ant-design-vue";
import commonModal from "./components/commonModal";

export default defineComponent({
    name: "index",
    components: { commonModal},
    setup() {
        const state = reactive({
            userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
            shopId: '', // 店铺id
            shopName: '', // 店铺名称

        })
        // 对话框表单
        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })

        const tableDataObj = reactive({
            loading: false,
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 150,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "商品名称",
                    dataIndex: "goodsName",
                    key: "goodsName",
                    align: 'center',
                    // width: 120,
                    ellipsis: true
                },
                {
                    title: "商品所属店铺",
                    dataIndex: "shopName",
                    align: 'center',
                    // width: 200,
                    key: "shopName",
                    ellipsis: true
                },
                {
                    title: "商品所属分类",
                    dataIndex: "typeName",
                    key: "typeName",
                    align: 'center',
                    // width: 150,
                    ellipsis: true
                },
                {
                    title: "商品描述",
                    dataIndex: "remark",
                    align: 'center',
                    key: "remark",
                    ellipsis: true
                },
                {
                    title: "原价",
                    dataIndex: "originalPrice",
                    align: 'center',
                    key: "originalPrice",
                    ellipsis: true
                },
                {
                    title: "现价",
                    dataIndex: "presentPrice",
                    align: 'center',
                    key: "presentPrice",
                    ellipsis: true
                },
                {
                    title: "是否上架",
                    dataIndex: "status",
                    key: "status",
                    align: 'center',
                    ellipsis: true,
                    slots: { customRender: 'status'}
                },
                {
                    title: "商品库存",
                    dataIndex: "stock",
                    align: 'center',
                    key: "stock",
                    ellipsis: true,
                },
                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })




        // 获取商品信息
        const getList = async () => {
            const paprams = {
                limit: tableDataObj.pagination.pageSize,
                page: tableDataObj.pagination.current,
                shopId: state.shopId,
                name: ''
            }
            const {data} = await apiGetShopGoodsInfo(paprams)
            // console.log('商品信息Wie:', data)
            tableDataObj.tableData = data.data.list
            tableDataObj.pagination.total = data.data.totalCount
        }

        // 需要先获取到店铺id

        const getShopInfo = async () => {
            const { data } = await apiGetShopInfo({})
            if (data.code == 200) {
                state.shopId = data.data.id
                state.shopName = data.data.name
            }
            console.log('hhhhhh',data)
            await getList()

        }


        // 打开新增菜单弹框
        const showAddModal = () => {
            // state.addModalVisible = true
            modalData.showAdd = true
            modalData.title = "新增菜单"
            modalData.formState = {}
            modalData.typeName = "add"
        }

        // 编辑菜单
        const editHandle = (record) => {
            modalData.formState = record
            modalData.title = "编辑菜单"
            modalData.showAdd = true
            modalData.typeName = "edit"
        }

        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        // 控制对话框操作
        const handleClose = (val) => {
            if (val == 'add') {
                // 获取id
                // 获取对应的店铺所属id和名称
                const params = {...modalData.formState, ...{shopId: state.shopId, shopName: state.shopName}}
                console.log(111, params)
                apiAddGoods(params).then((res)=> {
                    // console.log('新增商品结果：',res)
                    if (res.data.code == 200) {
                        message.success('新增成功')
                    }
                }).finally(()=> {
                    getList()
                })


            }
            if (val == 'edit') {
                // 调用接口，编辑菜单
                console.log(modalData.formState)
                apiUpdateGoods(modalData.formState).then((res) => {
                    if (res.data.code == 200 ) {
                        message.success('编辑成功')
                    }
                }).finally(()=> {
                    getList()
                })
            }
            if (val == 'cancel') {
                // 点击取消按钮，
                getList()
            }
            modalData.showAdd = false
        }

        // 取消删除
        const cancel = () => {
            message.error('取消删除')
        }

        const confirm = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请先选择数据')
                return
            }
            // 调用删除接口
            apiDeleteGoods(rowSelection.selectedRowKeys).then((res) => {
                if (res.data.code == 200) {
                    message.success('删除成功')
                    getList()
                }
            })
        }


        onMounted( async () => {
            await getShopInfo()
            // getList()
        })
        return {
            ...toRefs(state),
            ...toRefs(tableDataObj),
            modalData,
            showAddModal,
            editHandle,
            rowSelection,
            confirm,
            cancel,
            handleClose
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .button {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 15px;
        }
    }
}
</style>
